<template>
  <div class="container _container">
      <a-card :bordered="false">
          <a-flex gap="middle" justify="start" wrap="wrap">
              <img style="width: 0.6rem;height: 0.6rem;border-radius: 50%;" :src="LoadStaticPath('/storage/static/common/default-avatar.webp')" alt="">
              <div>
                  <div style="font-weight: bold;font-size: 0.14rem;">
                      <span v-html="_t('dashboard.Welcome', { Account: `${userinfo.account}` })"></span>
                  </div>
                  <div>{{ _t("dashboard.PersonalDescription") }}</div>
              </div>
              <a-flex gap="middle" justify="center" style="margin-left: auto;">
                  <a-space>
                      <a-statistic title="代办" :value="2">
                          <template #suffix>
                              <span>/10</span>
                          </template>
                      </a-statistic>
                      <a-divider type="vertical" />
                      <a-statistic title="项目" :value="8"></a-statistic>
                      <a-divider type="vertical" />
                      <a-statistic title="团队" :value="300"></a-statistic>
                  </a-space>
              </a-flex>
          </a-flex>
      </a-card>
  </div>
</template>


<script setup lang="ts">
  import { LoadStaticPath } from "@/tool/common";
  import { _t } from "@/assets/lang/index.ts"
  import { GetUserinfo } from '@/tool/function'
  import { iPb } from "@/protobuf/interface";
  import { ref } from "vue";

  const userinfo = ref<iPb.Admin.IUserinfoResponse>(iPb.Admin.UserinfoResponse.create())
  userinfo.value = GetUserinfo()
</script>

<style scoped lang="less">
  ._container {
      background: #f5f5f5;
      overflow: auto;
      margin: 0;
      .ant-statistic {
          text-align: center;
          line-height: 1;
      }
  }
</style>